<template>
  <div class="labelhandle" id="labelhandle">
    <div class="labelhandle_box">
      <div class="header_box"></div>
      <div class="header_inner">
        <div class="btn_guied">
          <a-button style="margin-right:10px" @click="createLabel">新建</a-button>
          <a-button style="margin-right:10px" @click="Import">导入</a-button>
          <a-button @click="delect">删除</a-button>
        </div>
        <div>
          <a-input-search
            v-model="searchBig"
            placeholder="input search text"
            style="width: 200px;margin-right:8px"
            @search="onSearchBig"
          />
          <a-button icon="redo" @click="redoBig"></a-button>
        </div>
      </div>
      <div class="main_box">
        <a-table
          class="a_table"
          :columns="columns"
          :data-source="data"
          :rowKey="data.key"
          :row-selection="rowSelection"
        >
          <!-- <a-radio-group slot="action" v-model="value" @change="onChange">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>-->
          <a slot="action"  slot-scope="col" href="javascript:;">
            <a-tag class="tag_matching" color="#108ee9" v-if="col.Matching" @click="tagOpen(col)">是</a-tag>
            <a-tag class="tag_matching"  color="pink" v-else @click="tagShut(col)">否</a-tag>
          </a>
          <a slot="action1" slot-scope="col" href="javascript:;" @click="editLabel(col)">编辑</a>
          <a slot="action2" href="javascript:;" slot-scope="col" @click="delectProblem(col)">删除</a>
        </a-table>
      </div>
    </div>

    <!-- 编辑面板 -->
    <a-modal title="编辑标签" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <div class="edit_box">
        <p>
          <span>
            <i style="color:red">*</i>用户问
          </span>
          <a-input style="width:70%;margin-left:30px" v-model="editproblem.user"></a-input>
        </p>
        <p>
          <span>
            <i style="color:red">*</i>问题
          </span>
          <a-input style="width:70%;margin-left:43px" v-model="editproblem.problem" disabled></a-input>
        </p>
        <p>
          <span>问答语料</span>
          <a-input-search
            placeholder
            style="width:50%;margin-left:25px;margin-right:10px"
            v-model="searchData"
            @search="onSearch"
          />
          <a-button icon="redo" @click="redo"></a-button>
        </p>

        <a-table :columns="columns1" :data-source="data">
          <a slot="action" slot-scope="col" href="javascript:;" @click="matching2(col)">匹配</a>
        </a-table>
      </div>
    </a-modal>

    <!-- 添加面板 -->
    <a-modal title="新建标签" :visible="visible2" @ok="handleOk2" @cancel="handleCancel2">
      <div class="edit_box">
        <p>
          <span>
            <i style="color:red">*</i>用户问
          </span>
          <a-input style="width:70%;margin-left:30px" v-model="addproblem.user"></a-input>
        </p>
        <p>
          <span>
            <i style="color:red">*</i>问题
          </span>
          <a-input style="width:70%;margin-left:44px" disabled v-model="addproblem.problem"></a-input>
        </p>
        <p>
          <span>问答语料</span>
          <a-input-search
            placeholder
            style="width:50%;margin-left:25px;margin-right:10px"
            v-model="searchData"
            @search="onSearch"
          />
          <a-button icon="redo" @click="redo"></a-button>
        </p>

        <a-table :columns="columns1" :data-source="data">
          <a slot="action" slot-scope="col" href="javascript:;" @click="matching(col)">匹配</a>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '用户问',
    dataIndex: 'UserIssues',
    width: 100
  },
  {
    title: '问题',
    dataIndex: 'Problem',
    width: 100
  },
  {
    title: '是否匹配',
    key: '9',
    width: 100,
    ellipsis: true,
    scopedSlots: { customRender: 'action' }
  },
  {
    title: '更新时间',
    dataIndex: 'UpdateTime',
    width: 100
  },
  {
    title: '操作',
    key: '11',
    fixed: 'right',
    width: 100,
    ellipsis: true,
    scopedSlots: { customRender: 'action1' }
  },
  {
    title: '',
    key: '12',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action2' }
  }
]

const columns1 = [
  {
    title: '操作',
    key: '11',
    fixed: 'left',
    width: 100,
    ellipsis: true,
    scopedSlots: { customRender: 'action' }
  },
  {
    title: '问题',
    dataIndex: 'Problem',
    width: 300
  }
]

export default {
  data() {
    return {
      data: [
        {
          key: 1,
          UserIssues: '这是一个测试问题1吗？',
          Problem: '答：这是一个测试问题1',
          Matching: false,
          UpdateTime: '2020-3-25 13:30'
        },
        {
          key: 2,
          UserIssues: '这是一个测试问题2吗？',
          Problem: '答：这是一个测试问题2',
          Matching: true,
          UpdateTime: '2020-3-25 13:30'
        },
        {
          key: 3,
          UserIssues: '这是一个测试问题3吗？',
          Problem: '答：这是一个测试问题3',
          Matching: true,
          UpdateTime: '2020-3-25 13:30'
        },
        {
          key: 4,
          UserIssues: '这是一个测试问题4吗？',
          Problem: '答：这是一个测试问题4',
          Matching: false,
          UpdateTime: '2020-3-25 13:30'
        }
      ],
      columns,
      columns1,
      visible: false,
      visible2: false,
      value: 1,
      searchData: '',
      searchBig: '',
      addproblem: {
        user: '',
        problem: ''
      },
      editproblem: {
        user: '',
        problem: ''
      },
      keyRow: []
    }
  },
  methods: {
    // 添加数据标注
    // 打开添加数据标注
    createLabel() {
      this.visible2 = true
    },
    // 匹配问题按钮
    matching(item) {
      console.log(item)
      this.addproblem.problem = item.Problem
    },
    // 搜索问题语料
    onSearch() {
      console.log('搜索的语料是：' + this.searchData)
      this.searchData = ''
    },
    // 刷新问题语料
    redo() {
      console.log('添加问题的刷新')
    },
    // 确认添加
    handleOk2() {
      this.visible2 = false
      console.log(this.addproblem)
    },
    // 取消添加
    handleCancel2() {
      this.visible2 = false
      this.addproblem.user = ''
      this.addproblem.problem = ''
    },

    // 数据编辑
    // 打开编辑数据标注
    editLabel(item) {
      this.visible = true
      console.log(item)
      this.editproblem.user = item.UserIssues
      this.editproblem.problem = item.Problem
    },
    // 匹配问题按钮
    matching2(item) {
      console.log(item)
      this.editproblem.problem = item.Problem
    },
    // 确认编辑
    handleOk() {
      this.visible = false
      console.log(this.editproblem)
    },
    // 取消编辑
    handleCancel() {
      this.visible = false
      this.editproblem.user = ''
      this.editproblem.problem = ''
    },

    // 删除按钮
    delectProblem(item) {
      console.log(item)
    },

    // 搜索
    onSearchBig() {
      console.log(this.searchBig)
    },

    // 刷新
    redoBig() {
      console.log('刷新')
    },

    // 导入
    Import() {
      console.log('导入')
    },

    // 删除
    delect() {
      console.log('删除')
    },

    tagOpen(item) {
      let key = item.key
      let matching = !item.Matching
      console.log("key:" + key + "更改之后：" + matching);
      
      
    },

    tagShut(item) {
      let key = item.key
      let matching = !item.Matching
      console.log("key:" + key + "更改之后：" + matching);
      
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        onSelect: (record, selected, selectedRows) => {
          if (selected) {
            this.keyRow.push(record.key)
          } else {
            let key = record.key
            this.keyRow.forEach((value, item) => {
              if (value == key) {
                this.keyRow.splice(item, 1)
              }
            })
          }
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          if (this.keyRow.length == 0) {
            if (selected) {
              changeRows.forEach((value, item) => {
                this.keyRow.push(value.key)
              })
            } else {
              this.keyRow = []
            }
          } else {
            if (selected) {
              changeRows.forEach((value, item) => {
                this.keyRow.push(value.key)
              })
            } else {
              this.keyRow = []
            }
          }
        }
      }
    }
  }
}
</script>

<style>
.labelhandle{
  width: 96%;
  margin: 0 auto;
}
.labelhandle_box {
  width: 100%;
  height: 100%;
  margin: 40px;
  min-height: calc(100vh - 59px);
  /* box-shadow: 0px 0px 5px gray; */
}
.header_box {
}
.header_inner {
  width: 96%;
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}

.main_box {
  width: 96%;
  margin: 0 auto;
  margin-top: 10px;
}
.edit_box {
  width: 80%;
  margin: 0 auto;
}
.tag_matching{
  width: 40px;
  text-align: center;
}
</style>